<template>
	<view class="content">
		<!--f1:顶部图片和头像-->
		<!--f2:互动消息列表-->
		<uni-list>
			<uni-list-item v-for="msg in data" :key="msg.mid">
				<!--列表项左侧:头像-->
				<template v-slot:header>
					<view class="msg-header"><image :src="base + msg.avatar" mode="widthFix" /></view>
				</template>
				<!--列表项右侧:消息详情-->
				<template v-slot:body>
					<view class="msg-body">
						<view class="uname">{{ msg.uname }}</view>
						<view class="content">{{ msg.content }}</view>
						<view class="pic-list">
							<!--缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。-->
							<!--缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。-->
							<image v-for="pic in msg.picList" :key="pic.pid" :src="base + pic.url" mode="aspectFill"></image>
						</view>
						<view class="time">{{ msg.pubTime }}</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!--f3:页面底部 “加载更多more、加载中loading、没有更多了noMore”的提示信息-->
		<uni-load-more :status="isLoading ? 'loading' : pageNum >= pageCount ? 'noMore' : 'more'"></uni-load-more>

		<goTop></goTop>
	</view>
</template>

<script>
import { base, chatQuery } from '@/service/index.js';
export default {
	data() {
		return {
			base,
			pageNum: 0, //当前页码  5
			pageCount: 99999, //一共多少页  5
			data: [], //当前页数据
			isLoading: false //是否正在加载新数据
		};
	},
	//生命周期方法 - 页面加载时触发
	async onLoad() {
		//加载下一页数据 场景1:新进入当前页时
		this.loadNextPageData();
	},
	//生命周期方法 - 触底部
	onReachBottom() {
		//加载下一页数据 场景2:下拉到底部加载下一页时
		this.loadNextPageData();
	},
	//生命周期方法 - 下拉刷新
	onPullDownRefresh() {
		//--从当前显示页中,清除旧数据
		this.pageNum = 0;
		this.pageCount = 99999;
		this.data = [];
		//--向当前显示页中,加载新数据
		this.loadNextPageData();
	},
	methods: {
		//加载下一页数据
		async loadNextPageData() {
			//1.判断，如果没有更多页，直接返回
			if (this.pageNum >= this.pageCount) {
				return;
			}
			//2.加载新数据开始
			this.isLoading = true;
			//3.异步请求服务器下一页数据
			let { pageCount, pageNum, data } = await chatQuery(this.pageNum + 1);
			//4.赋值数据
			this.pageCount = pageCount;
			this.pageNum = pageNum;
			this.data = this.data.concat(data);
			//5.加载新数据结束
			this.isLoading = false;
			//6.清除下拉状态
			uni.stopPullDownRefresh();
		}
	}
};
</script>

<style scoped lang="scss">
.msg-header {
	margin-right: $uni-spacing-row-base;
	image {
		width: 90rpx;
	}
}
.msg-body {
	flex-direction: column;
	.pic-list {
		display: block;
		image {
			width: 185rpx;
			height: 150rpx;
			border: $uni-border;
			margin-right: $uni-spacing-row-sm;
		}
	}
	.time {
		font-size: 8px;
		color: $uni-text-color;
	}
}
</style>
